﻿@{
	Layout = null;
}
<link href="~/libs/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />
<style>


	th, td {
		border: 1px solid #ddd;
		padding: 10px;
		text-align: left;
	}

	th {
		background-color: #f4f4f4;
		font-weight: bold;
	}

	.toolbar {
		margin-bottom: 10px;
	}

		.toolbar input[type="text"] {
			margin-right: 10px;
		}

		.toolbar button {
			margin-right: 5px;
			background-color: #007bff;
			color: white;
			border: none;
			padding: 8px 12px;
			cursor: pointer;
			border-radius: 4px;
		}

			.toolbar button:hover {
				background-color: #0056b3;
			}

	.actions button {
		background-color: #dc3545;
		color: white;
		border: none;
		padding: 5px 10px;
		cursor: pointer;
		border-radius: 4px;
	}

		.actions button:hover {
			background-color: #c82333;
		}
</style>


<div class="toolbar">
	货主:	<select id="belongsOwner">
		<option value="-1">--请选择--</option>
		<option value="0">--zsx--</option>
		<option value="1">--yy--</option>
		<option value="2">--db--</option>
		<option value="3">--hc--</option>
		<option value="4">--dyw--</option>
	</select>
	<button id="searchButton">查询</button>
	<button id="addButton">录入</button>
	@* 	<button id="updateButton">编辑</button>
	<button id="removeButton">删除</button> *@
	<button id="removeRange">批量删除</button>
</div>

<table class="layui-hide" id="mainData" lay-filter="mainData" style="margin-top: 10px;margin-left: 20px">
</table>


<script type="text/html" id="operateBtn">
	<button class="layui-btn layui-btn-sm   layui-bg-radius" style=background-color:red lay-event="remove" >删除</button>
	<button class="layui-btn layui-btn-sm   layui-bg-radius" style=background-color:blue lay-event="update" >修改</button>
</script>


<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.9.21/layui/layui.js"></script>
<script>
	layui.use(['table', 'form'], function () {
		  var table = layui.table;
		  var form = layui.form;

	// <!-- #region 表格 -->

			  function showData() {
				  table.render({
					  elem: '#mainData',
					  url: '/ProductDetails/GetProductDetailsList',
					  page: true,
					  limit: 10,
					  limits: [10, 20, 30],
					  cols: [[
						  { type: 'checkbox', fixed: 'left' },
						  { field: 'belongsOwner', title: '货主', width: 120, sort: true, align: 'center',templet:function(d)
						  {
							  const belongsOwnerMap = {
											0: 'zsx',
											1: 'yy',
											2: 'db',
											3: 'hc',
											4: 'dyw',
										};
										 return belongsOwnerMap[d.belongsOwner]||'未知';
						  } },
							{field: 'productCategories', title: '产品大类', width: 200, align: 'center', templet: function (d)
									{
										//三目运算符判断产品大类
										 return d.productCategories === 0 ? '电缆' :
												d.productCategories === 1 ? '恒温' :
												d.productCategories === 2 ? '常温' :
												d.productCategories === 3 ? '调温' : '未知';
									}
								 },
								 {field: 'productAttributes', title: '产品属性', width: 200, align: 'center', templet: function (d)
									{
										return d.productAttributes === 0 ? '电缆' :
											d.productAttributes === 1 ? '数码产品' :
											d.productAttributes === 2 ? '日用' : '未知';
									}
								 },
								{field: 'price', title: '价格', width: 200, align: 'center'},
								 {field: 'productCode', title: '商品编码', width: 200, align: 'center'},
								{field: 'itemBarcode', title: '商品条码', width: 200, align: 'center'},
								 {field: 'productSpecifications', title: '商品规格', width: 200, align: 'center'},
								 {field: 'productBranding', title: '商品品牌', width: 200, align: 'center'},
								  {field: 'sku', title: 'SKU', width: 200, align: 'center'},
								  {field: 'productName', title: '商品名称', width: 200, align: 'center'},
								 {field: 'unit', title: '单位', width: 200, align: 'center',templet:function(d){
								   const unitMap = {
											0: '个',
											1: '盒',
											2: '只',
											3: '枚',
										};
										 return unitMap[d.unit]||'未知';
								 }},
								 {field: 'weight', title: '重量', width: 200, align: 'center'},
								 {field: 'long', title: '长', width: 200, align: 'center'},
								 {field: 'wide', title: '宽', width: 200, align: 'center'},
								{field: 'high', title: '高', width: 200, align: 'center'},
								 {field: 'volume', title: '体积', width: 200, align: 'center'},
								 {field: 'shelfLife', title: '保质期', width: 200, align: 'center'},
								 {field: 'acceptableDays', title: '允收天数', width: 200, align: 'center'},
								 {field: 'billableItems', title: '计费商品类', width: 200, align: 'center', templet: function (d)
									{
										//将 billableItems 的值和显示文本存储在一个对象中，直接通过键值对查找。
										const billableItemsMap = {
											0: '整拖',
											1: '轻抛/按箱',
											2: '轻抛5KG以上',
											3: '计费吨',
										};
										 return billableItemsMap[d.billableItems]||'未知';
									}
								 },
								 {field: 'codeDiscNumber', title: '码盘单层数量', width: 200, align: 'center'},
								 {field: 'discLayerHeight', title: '码盘层高', width: 200, align: 'center'},
								 {field: 'tearDownControl', title: '拆零控制', width: 200, align: 'center',templet: function (d)
									{
										const tearDownControlMap = {
											0: '是',
											1: '否',
											2: '初始',
										};
										return tearDownControlMap[d.tearDownControl]||'未知';
									}
								 },
								 {field: 'splitUnits', title: '拆零单位', width: 200, align: 'center', templet: function (d)
									{
										const splitUnitsMap = {
											0: '件',
											1: '箱',
											2: '个',
											3: '桶',
										};
										return splitUnitsMap[d.splitUnits]||'未知';
									}
								 },
								 {field: 'splitNumber', title: '拆零数量', width: 200, align: 'center'},
								 {field: 'numLnventoryLevels', title: '最小库存量', width: 200, align: 'center'},
								 {fixed: 'right', title:'操作', templet: '#operateBtn', width: 200, align: 'center'},

					  ]],
					  where: {
						  belongsOwner: $("#belongsOwner").val()||0,
					  },
					  // parseData: function (res) {
						 //  return {
							//   code: res.code,
							//   count: res.data.currentPage,
							//   data: res.data.queryable
						 //  };
					  // },
				  });
			  }

			  showData();

	//<!-- #endregion -->




		  //监听工具条
		  table.on('tool(mainData)', function (obj) {
			  var data = obj.data;
			  if (obj.event === 'remove') {
				  layer.confirm('确定删除该条数据嘛？', function (index) {
					  $.ajax({
						  url: '/ProductDetails/RemoveProductDetails',
						  type: 'get',
						  data: { id: data.id },
						  success: function (res) {
							  if (res>0) {
								  layer.msg('删除成功', { icon: 1, time: 1000 }, function () {
									  showData();
								  });
							  } else {
								  layer.msg('删除失败: ' + res.msg, { icon: 2, time: 2000 });
							  }
						  }
					  });
					  layer.close(index);
				  });
			  }else{
					  layer.open({
						  type: 2,
						  area: ['1000px', '800px'],
						  shade: 0.6,
						  shadeClose: true,
						  maxmin: true,
						  anim: 0,
						  content: '/ProductDetails/UpdateProductDetailsView?id=' + data.id, // 传递ID
						  end: function () {
							  showData(); // 刷新表格
						  }
					  });
			  }
		  });

		  // 查询
		  $("#searchButton").on("click", function () {
			  showData();
		  });

		  // 录入
		  $("#addButton").on("click", function () {
			  layer.open({
				  type: 2,
				  area: ['1000px', '800px'],
				  shade: false,
				  shadeClose: true,
				  maxmin: true,
				  content: '/ProductDetails/AddProductDetailsView',
				  end: function () {
					  location.reload();
				  }
			  });
		  });

		  // 批量删除
		  $("#removeRange").on("click", function () {
			  var checkStatus = table.checkStatus('mainData');
			  var data = checkStatus.data;
			  var ids = data.map(function (item) {
				  return item.id;
			  });

			  if (ids.length === 0) {
				  layer.msg('请选择要删除的数据', { icon: 0, time: 2000 });
				  return;
			  }

			  layer.confirm('确定删除选中的数据吗？', function (index) {
				  $.ajax({
					  url: '/ProductDetails/RemoveRangeProducctDetails',
					  type: 'get',
					  data: { ids: ids.toString() },
					  success: function (res) {
						  if (res==1) {
							  layer.msg('批量删除成功', { icon: 1, time: 1000 }, function () {
								  showData();
							  });
						  } else {
							  layer.msg('批量删除失败: ' + res.msg, { icon: 2, time: 2000 });
						  }
					  }
				  });
				  layer.close(index);
			  });
		  });





	  });


</script>





